import { Component, OnInit } from '@angular/core'
import { JsonApiService } from 'app/core/api/json-api.service' //http请求配置引入
import { Router, ActivatedRoute } from '@angular/router' //路由引入
import { config } from '../../shared/smartadmin.config'

declare var $: any
@Component({
  selector: 'sa-gps-detection',
  templateUrl: './gps-detection.component.html'
})
export class GpsDetectionComponent implements OnInit {
  tableData: any[] = [] //table数据
  totalCount: number = 0 //分页总条数
  curPage: number = 1 //分页当前页
  pageSize: number = 10 //内置的分页每页条数
  searchKey: string = ''
  deviceId: string = ''
  carNumber: string = ''
  timeType: string = '1'
  exceptionType: string = ''
  selectedCompanyId: string = ''
  selectedCompanyName: string = ''
  startTime: string = '' //table时间控件
  endTime: string = '' //table时间控件
  constructor(private jsonApiService: JsonApiService, private router: Router, private activatedRoute: ActivatedRoute) {
    activatedRoute.queryParams.subscribe(queryParams => {
      this.curPage = queryParams.nowPage || 1
    })
  }
  ngOnInit() {
    this.initDate().then(() => {
      this.load()
    })
  }
  //初始化时间
  initDate() {
    var that = this
    return new Promise(function (resolve, reject) {
      System.import('assets/js/datepicker/js/bootstrap-datetimepicker.min.js').then(() => {
        System.import('assets/js/datepicker/locales/bootstrap-datetimepicker.zh-CN.js').then(() => {
          $('#datetimepicker3')
            .datetimepicker({
              format: 'yyyy-mm-dd hh:ii:ss',
              language: 'zh-CN',
              autoclose: true
            })
            .on('changeDate', function (e) {
              var date = e.date
              var time = common.getTimeMmss(date)
              that.startTime = time
              $('#datetimepicker4').datetimepicker('setStartDate', time)
            })
          $('#datetimepicker4')
            .datetimepicker({
              format: 'yyyy-mm-dd hh:ii:ss',
              language: 'zh-CN',
              autoclose: true
            })
            .on('changeDate', function (e) {
              var date = e.date
              var time = common.getTimeMmss(date)
              that.endTime = time
              $('#datetimepicker3').datetimepicker('setEndDate', time)
            })

          resolve()
        })
      })
    })
  }
  //table刷新
  refresh() {
    this.load()
  }
  //表格搜索
  table_search() {
    this.curPage = 1
    this.load()
  }
  //初始化加载list数据
  load() {
    this.startTime = $('#datetimepicker3').val()
    this.endTime = $('#datetimepicker4').val()
    let data = {
      pageSize: this.pageSize,
      nowPage: this.curPage,
      parameters: {
        companyId: this.selectedCompanyId,
        deviceId: this.deviceId,
        startTime: this.startTime,
        endTime: this.endTime,
        exceptionType: this.exceptionType,
        timeType: this.timeType
      }
    }
    let reqdata = 'gridPager=' + JSON.stringify(data)
    this.jsonApiService.http('gpsExceptionInfo/gpsExceptionPageList.html', reqdata).subscribe(data => {
      if (data.isSuccess) {
        this.tableData = data.exhibitDatas
        this.totalCount = data.recordCount
      } else {
        this.jsonApiService.message(data.message)
      }
    })
  }
  //清空数据
  table_clear() {}
  //分页回调
  paginate(e) {
    this.curPage = e.page + 1
    this.pageSize = e.rows
    this.load()
  }
  //公司选中回调
  companySelected(data) {
    this.selectedCompanyId = data.companyId
    this.selectedCompanyName = data.companyName
    this.deviceId = data.deviceId
    this.carNumber = data.carNumber
  }

  //删除所选时间
  del_date() {
    this.startTime = ''
    this.endTime = ''
    $('#datetimepicker3').val('').change()
    $('#datetimepicker4').val('').change()
    $('#datetimepicker4').datetimepicker('setStartDate', null)
    $('#datetimepicker3').datetimepicker('setEndDate', null)
  }
  /**
   *  echart图
   */
  activeSelected: any
  startTime_chart: string = ''
  endTime_chart: string = ''
  isChartView: boolean = false
  isMapView: boolean = false
  specifyTimeChart: any = {
    startTime: '',
    endTime: ''
  }
  selectedRow: any
  drawTrackArr: any
  //数据查看
  drawAbnormalChart() {
    if (!this.selectedRow) {
      this.jsonApiService.message('先选择需要查看折线图的车辆')
      return
    }
    if (!this.startTime_chart || !this.endTime_chart) {
      this.jsonApiService.message('时间不能为空')
      return
    }
    let timeCheck = common.correctTimeParams(this.startTime_chart, this.endTime_chart, 0)
    if (!timeCheck.status) {
      this.jsonApiService.message(timeCheck.message)
      return
    }
    this.lineParamDeal(this.selectedRow)
  }
  checkAbnormal(row: any) {
    if (!row.exceptionStartTime) {
      this.jsonApiService.message('该设备没有异常开始时间!')
      return
    }
    if (!row.exceptionEndTime) {
      this.jsonApiService.message('该设备没有异常结束时间!')
      return
    }

    let temStartFixed = common.mmsstoTimestamp(row.exceptionStartTime)
    let temEndFixed = common.mmsstoTimestamp(row.exceptionEndTime)
    // row对象新增属性
    this.activeSelected = row.id
    this.startTime_chart = common.getTimeMmss(new Date(temStartFixed - 12 * 3600 * 1000))
    this.endTime_chart = common.getTimeMmss(new Date(temEndFixed + 12 * 3600 * 1000))
    this.isChartView = true
    this.specifyTimeChart = {
      startTime: this.startTime_chart,
      endTime: this.endTime_chart
    }
    this.lineParamDeal(row)
  }
  runParent(value) {
    this.drawTrackArr = value
  }
  //折线图时间回调事件
  getSelectChartTime(time) {
    this.startTime_chart = time.startTime
    this.endTime_chart = time.endTime
  }
  showMapView(val) {
    this.isMapView = val
  }
  //获取传感器通道参数
  lineParamDeal(row) {
    let reqdata = 'deviceId=' + row.deviceId
    this.jsonApiService.http('realtime/getRealTimeData.html', reqdata).subscribe(result => {
      if (result.success && result.data) {
        let params: any = {
          deviceId: row.deviceId,
          startTime: this.startTime_chart,
          endTime: this.endTime_chart,
          coefficient: result.data.coef
        }
        if (row.exceptionStartTime && row.exceptionEndTime) {
          params.abnormalMarkLine = {
            name: '异常时间区域',
            type: 'line',
            itemStyle: {
              color: 'rgba(255, 173, 177, 0.8)'
            },
            markArea: {
              data: [
                [
                  {
                    xAxis: row.exceptionStartTime
                  },
                  {
                    xAxis: row.exceptionEndTime
                  }
                ]
              ]
            }
          }
        }
        this.selectedRow = params
      }
    })
  }
  closeChart() {
    this.isChartView = false
    this.activeSelected = ''
  }

  // 数据导出
  exportData() {
    this.startTime = $('#datetimepicker3').val()
    this.endTime = $('#datetimepicker4').val()
    let data = {
      pageSize: this.pageSize,
      nowPage: this.curPage,
      parameters: {
        companyId: this.selectedCompanyId,
        deviceId: this.deviceId,
        startTime: this.startTime,
        endTime: this.endTime,
        exceptionType: this.exceptionType,
        timeType: this.timeType,
        export: '1'
      }
    }

    let timeCheck = common.correctTime(data, ['export'])
    if (!timeCheck.status) {
      this.jsonApiService.message(timeCheck.message)
      return
    }
    common.exprotDataFile(data, 'gridPager', config.BaseURL + 'gpsExceptionInfo/gpsExceptionPageList.html')
  }
}
